<template>
  <div class="errorpage" ref="bgstar" id="bgstar">
    <!-- <img src="../../assets/404.png" class="myimg" alt=""> -->
    <!-- <img :src="pic" class="myimg" /> -->
    <img :src="require('@/assets/404.png')" class="myimg" alt="" />

    <div class="down" v-if="false" @click="gotowhere">{{ time }} S后跳转</div>

    <div class="dao" @click="gotowhere">
      <van-circle
        v-model="currentRate"
        color="#f50"
        :rate="100"
        :speed="20"
        :text="text"
        :size="120"
      />
    </div>

    <span v-for="(l, i) in spanNum" :key="i" :style="l" class="spandot"></span>
  </div>
</template>

<script>
import pic from "@/assets/404.png";
var timer = null;

export default {
  name: "notFound",
  data() {
    return {
      pic: pic,
      spanNum: [],
      time: 5,
      currentRate: 0,
      // text: '倒计时'
    };
  },
  computed: {
    text() {
      return this.currentRate + "%" // 百分数时间倒计时
    },
  },
  watch: {
    currentRate(v) {
      if (v == 100) {
        this.gotowhere()
      }
    },
  },
  methods: {
    gotowhere() {
      this.$router.push({ name: 'guide' }) // 跳转guide页面
    },
    spanInit() {
      var width = document.getElementById('bgstar').clientWidth;
      var height = this.$refs.bgstar.clientHeight;
      console.log(width, height)

      for(let i = 0; i < 520; i++) {
        let left = Math.random() * width
        let top = Math.random() * height
        let sclar = Math.random() * 2.5 // 小星星随机大小
        let rate = Math.random() * 2.5 // 小星星过渡时间

        let r = Math.floor(Math.random() * 256) // 随机生成256以内r值
        let g = Math.floor(Math.random() * 256) // 随机生成256以内g值
        let b = Math.floor(Math.random() * 256) // 随机生成256以内b值
        let alpha = Math.random()
        this.spanNum.push({
          top: top + 'px',
          left: left + 'px',
          transform: 'scale('+ sclar +')',
          animationDelay: rate + 's',
          background: `rgba(${r}, ${g}, ${b}, ${alpha})`
        })
      }
    }
  },
  mounted() {
    this.spanInit()
    timer = setInterval (() => {
      if(this.time > 0) {
        this.time--
      }else {
        clearInterval(timer)
        timer = null
        this.gotowhere()
      }
    },1000)
  },
  destroyed() {
    clearInterval(timer)
    timer = null
  }
}
</script>

<style lang="scss" scoped >
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 13px;
    right: 13px;
    ::v-deep .van-circle__text { // 在写了scoped的情况下 需加上::v-deep 防止样式穿透
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.7;
    }
  }
}
</style>

